:root{  
  --primary-color: #212121;  
  --secondary-color: #f7f7f7;  
  --tirtiary-color: #dba854;
}.welcome-paragraph,
.album-title{  
  font-size: 1.6rem;
}

.albums-section-title {  
  font-weight: 300;  
  font-size: 1.8rem;  
  margin-bottom: 3rem;
}

h1 {font-size:3rem;}.navbar-section {    
  fill: #fff; /* white */    
  color: #fff; /* white */    
  background-color: var(--primary-color);    
  padding-top: 0;    
  padding-bottom: 0;    
  height: 10rem; 
}

@media screen and (min-width: 36em){
  padding-left: 10rem!important;    
  padding-right: 10rem!important;
}

.selection-count{  
  color: #fff;
}

.svg-stroke path,
.svg-stroke line {  
  stroke: white;
}  

.svg-fill path {  
  fill: white;
}

.hamburger-menu path{
  stroke: white;
}

.avatar-user-dropdown,
.avatar-user-dropdown .user-initials{
  border-color: white;
  color: white;
}footer{    
  background-color: var(--primary-color);
  color: white;
}

footer a{
  text-decoration: none;
  color: var(--secondary-color);
}    .body {  
  background-color: white;  
  font-family: 'MuseoSans', Helvetica, Arial, sans-serif;  
}

.account-logo .brandkit-logo{  
  filter: none;
}
.center {text-align:center;}
.social-links a {font-size:2em; margin-top:2em;padding: 1rem 2rem;}

/* fix code wrapping on mobile */
pre {
  font-family: monospace,monospace;
  font-size: 1em;
  max-width: 100%;
  overflow: auto;
  white-space: normal;
}


/* -----------------------
   Layout 
   ----------------------- */
.main {  
  margin-top: 10rem;
  min-height: calc(100vh - 22rem);
}

@media screen and (min-width: 62em){    
  .section {        
    padding: 2rem 10rem;      
  }
}

@media screen and (min-width: 75em){    
  .html-section.index-section,  
  .search-section {        
    max-width: 90rem;        
    margin: auto;    
  }   
  
  .albums-section{
    max-width: 100%;
    margin: 0;
  }
  
  .html-section.index-section {        
    padding: 5rem 0 3rem;    
  }        
  .albums-section {        
    margin-bottom: 2rem;        
  }        
  
  .search-section {       
    padding: 0;    
  }
}

@media screen and (min-width: 120em){  
  .html-section.index-section,  
  .albums-section,  
  .search-section {   
    max-width: unset;  
  }    
  
  .html-section.index-section {    
    padding: 5rem 34.4rem 3rem;  
  }    
  
  .albums-section {    
    padding: 0 34.4rem 6rem;  
  }    
  
  .search-section {   
    padding: 0 34.4rem;  
  }
}

.page-actions {  
  padding-bottom: 1rem;
  background-color: white;
}

@media screen and (min-width: 36em){
  .page-actions{
    padding-top: 4.2rem;  
    padding-bottom: 4.2rem;
    background-color: var(--secondary-color);  
  }
}

.welcome-paragraph {  
  margin: 0;
}

.albums-section-title {display: none;}

.album-name {  
  color: white;
}

.album:first-child {
  margin-left: auto;
}

.album:last-child {
  margin-right: auto;
}

.open-basket .section {
  padding-left: 1rem;
  padding-right: 1rem;
}

.open-basket .asset-proxy-section{
  margin-right: 2rem;
}

section#intro{
  text-align: center;
  max-width: 100%;
  margin: auto;
}

.search-section {
  margin: 2rem auto;
}

.no-search-result{
  max-width: 100%;
}

.filters{
  justify-content: center;
}

@media screen and (max-width: 36em){
  .filter{
    padding: 1rem 1.6rem;
    border-radius: 4rem;
    background: var(--secondary-color);
  }
  
  .search-section {
  margin: 2rem auto 0;
  }
}

/* forms */
.portal .form-section,
.portal .me-section{
  background-color: #f4f4f4;
  padding: 2rem 6rem;
}

.portal .timeline-day{
  background-color: #f4f4f4;
}

.portal .form-section .asset-card,
.portal .me-section .asset-card{
  background-color: white;
}

/* credit widget */
.credits-widget .credit-card{background-color: #f7f7f7;}
.credits-widget .credit-card .credit-phone-and-email{gap:0.8rem;}
.credits-widget .credit-avatar{border: 1px solid #f7f7f7;}
.credits-widget .credit-email, 
.credits-widget .credit-phone{
  padding: 0.5rem;
}

/* 
Search 
*/
.search-box {  
  height: 7.2rem;  
  background-color: var(--secondary-color);
}

.search-box-input {  
  background-color: var(--secondary-color);
}

@media screen and (min-width: 36em){
  .filters{  
    margin-top: 4rem;  
    margin-bottom: 6rem;
  }
}

/* show the Search label and the And/Or toggle in the Search Grid */
label.search-label {
  display: block;
}

/* -----------------------
   Buttons and links 
   ----------------------- */

.normal-button {  
  color: white;  
  background-color: var(--primary-color);
}

.asset-actions-section a.asset-download-button{  
  background: var(--primary-color);  
  color: white;
}

.asset-actions-section a.asset-download-button svg path{  
  stroke: white;
}

.asset-actions-section a {    
  padding: 1.1rem 1.6rem;    
  text-decoration: none;    
  border: 1px solid var(--primary-color);    
  display: flex;    
  align-items: center;
}

.tag.selected-tag {  
  background-color: var(--primary-color);  
  border-radius: 6.2rem;
}

.asset-tags a {  
  font-size: 1.2rem;  
  line-height: 1.8rem;  
  float: left;  
  margin: 0 0.8rem 1.2rem 0;
}

.asset-add-to-basket-button {  
  padding: 1.1rem 1.6rem;  
  border: 1px solid var(--primary-color);
}

.asset-actions-section a.asset-edit-button{  
  display: none;
}

/* Accessibility*/
a:focus-visible,
button:focus-visible{  
  box-shadow: 0 0 3px 3px var(--tirtiary-color);
}

/* fix download form terms field separation issue */
.form-checkbox.terms {
margin: 5rem 0;
}/*------------------  Asset Page--------------------*/
.state-label,
.asset-source{    
  display: none;
}

.grid,
.assets-pagination,
.grid-section-wrapper{    
  background-color: var(--secondary-color); 
}

.assets-pagination {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.asset-image-link {    
  background: linear-gradient(180deg, #f7f7f7 0%, #d1d1d1 100%);    
  flex: 0 0 100%;}

.asset .asset-buttons {    
  flex: 0 0 content;    
  display: inline;
}

.grid-view .asset-info,
.download-asset-icon, 
.share-asset-icon{  
  display:none;
}

.asset-data{    
  text-decoration: none;   
  flex: 80%;    
  display: inline;
}

.asset .asset-name {    
  display: flex;    
  font-size: 1.4rem;
}

.portal .grid-view .asset {    
  display: flex;    
  flex-direction: row;    
  flex-wrap: wrap;    
  row-gap: 1.2rem;    
  align-content: flex-start;    
  position: relative;    
}

.grid .asset .asset-buttons button{    
  padding: 0;    
  padding-top: 0.2rem;
}

.feed-view .asset-data{
  margin-top: 1rem;
}

.feed-view .asset-info span:not(.asset-id):before{
  content: '|';
  margin-right: 0.5rem;
}

.feed-view .asset-grid-release-date,
.feed-view .asset-info,
.feed-view .asset-grid-description{
  margin-left: 0.5rem;
}

/* Hover asset */
.portal .grid-view .asset:hover {    
  background-color: black;
}
.portal .grid-view .asset:hover .asset-data{    
  color: white; 
}

.asset-grid-icon .icon{
  margin-right: 1rem;
}

.grid-view .asset:hover .asset-grid-icon .icon path{    
  fill: white;    
}

.grid-view .asset:hover .asset-grid-icon .icon.image-icon path,
.grid-view .asset:hover .asset-buttons path {    
  stroke: white;
  fill: none;    
}

.grid-view .asset:hover .asset-grid-icon .icon.link-icon path, 
.grid-view .asset:hover .asset-grid-icon .icon.post-icon path {
  fill: none;
  stroke: white;
}

.portal .asset-image-link,
.portal .asset-post-link{    
  position: relative;    
  transition: 0.5s all;
}

.portal .asset:hover a.asset-image-link:after,
.portal .asset:hover a.asset-post-link:after  {    
  top:0;
}

.grid-view .asset a.asset-image-link:after,
.grid-view .asset a.asset-post-link:after{    
  content: '';    
  position: absolute;    
  top: 100%;    
  left: 0;    
  bottom: 0;    
  right: 0;    
  transition: 0.2s all;    
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.58) 0.01%, #000000 100%);
}

.portal .grid-view .asset:hover .asset-info span {    
  display:block;
}

.portal .grid-view .asset:hover .asset-info{    
  display: block;    
  position: absolute;    
  top: 4rem;    
  font-size: 1.4rem;    
  padding-left: 1rem;
  text-align: left;
}

.portal .asset:hover .select-button .icon {  
  fill:white;
}

.portal .asset .asset-buttons{  
  margin-right:0.5rem;
}

.portal .asset .asset-name{  
  margin-left:0.5rem;
}

.portal .asset:hover .asset-post-link {    
  -webkit-box-orient: unset;
}

.portal .asset:hover .asset-post-link .post-title{  
  opacity: 0.5;
}

.grid-view .asset span.asset-source:before,
.grid-view .asset span.asset-id:before,
.grid-view .asset span.asset-size:before,
.grid-view .asset span.asset-type:before,
.grid-view .asset span.asset-extension:before,
.grid-view .asset span.asset-dimensions:before,
.grid-view .asset span.asset-word-count:before{    
  font-weight: bold;
}

.grid-view .asset span.asset-source:before {    
  content: 'Source: ';
}

.grid-view .asset span.asset-word-count:before{
  content: 'Word count: ';
}

.grid-view .asset span.asset-dimensions:before {
  content: 'Dimensions: ';
}

.grid-view .asset span.asset-id:before {    
  content: 'ID: ';
}

.grid-view .asset span.asset-size:before {    
  content: 'Size: ';
}

.grid-view .asset span.asset-type:before {    
  content: 'Asset Type: ';
}

.grid-view .asset span.asset-extension:before {    
  content: 'Asset Extension: ';
}

.masonry-view .asset-image-link{
  background: none;
}

/*------------------  Asset Detail Page--------------------*/
.proxy-body.post{
  padding-top: 0;
}

.asset-page-wrapper.post .asset-proxy-section,
.asset-page-wrapper.post .asset-details-section,
.asset-page-wrapper.post .asset-tags-section{
  max-width: 90rem;
  margin: auto;
  width: 100%;
}

.asset-page-wrapper.post .asset-proxy-section{
  margin-top:2rem;
}

.asset-page-wrapper{
  padding: 2rem;
}

.asset-tags-title,
.asset-type-title,
.asset-size-title,
.asset-filename-title,
.asset-dimensions-title,
.asset-type-value,
.asset-extension-title,
.asset-id-title,
.asset-word-count-title{  
  display:none;
}

.asset-licence-value:before{
  content: '-';
  margin-right: 0.5rem;
}

.asset-licence-subtitle:after,
.asset-expiry-date-title:after,
.asset-release-date-title:after,
.asset-credit-title:after,
.asset-usage-title:after{
  content:':';
}

.AssetView .asset-title {
  font-size: 2rem;
  flex: 0 0 100%;
}

.asset-page-main .asset-type, 
.asset-page-main .asset-size,
.asset-page-main .asset-extension,
.asset-page-main .asset-id{    
  width: 33%;    
  display: inline;
}

.asset-details-section {
  display: flex;    
  flex-direction: row;    
  flex-wrap: wrap;
}

.asset-details-section article {    
  flex: 1;    
  flex: 0 0 100%;
}

.asset-details-section .asset-type,
.asset-details-section .asset-size,
.asset-details-section .asset-dimensions,
.asset-details-section .asset-extension,
.asset-details-section .asset-id,
.asset-details-section .asset-word-count{
  flex: 0 0 content;
}

.asset-type-icon,
.asset-license-icon,
.asset-expiry-date-icon,
.asset-release-date-icon,
.asset-credit-icon,
.asset-usage-icon,
.asset-created-at-icon,
.asset-reference-icon,
.asset-location-icon,
.asset-source-icon{  
  float: left;  
  margin-right: 1rem;  
  display: -webkit-flex;  
  display: flex;  
  -webkit-align-items: center;  
  align-items: center;  
  -webkit-justify-content: center;  
  justify-content: center;
}

.AssetView .asset-extension:before, 
.AssetView .asset-id:before, 
.AssetView .asset-size:before, 
.AssetView .asset-dimensions:before,
.AssetView .asset-word-count:before{    
  content: ' | ';    
  margin-left: 0.5rem;
}

.AssetView .asset-id:before {
  content: '#';
  margin-right: -0.4rem;
}

.asset-licence-title {  
  display: none;
}

/* removed comma in css as it's now added in HTML
.AssetView  .asset-placename:after,
.AssetView  .asset-city:after,
.AssetView  .asset-region:after {content:','}
*/

.AssetView .asset-latitude:before {
	content:'Latitude: ';
}
.AssetView .asset-longitude:before {
	content:'Longitude: ';
}

/* Margins and paddings */
.AssetView .asset-details-section article {  
  margin-bottom: 1.2rem;
}

.asset-page-wrapper .section{  
  padding: 0;
}

.asset-tags{
  margin-top: 3rem;
}

.asset-term-of-use{  
  margin-top: 1rem;
}

.AssetView .asset-body {  
  margin-bottom: 1.8rem;
}

.asset-body p {  
  margin: 0;
}

.AssetView .asset-type-icon {
  order: 2; 
  margin-bottom: 0.8rem;
  flex: unset;
}

.AssetView .asset-name {
  order: 1;
  width: 100%;
}

.AssetView .asset-id {
  order: 3;
}

.AssetView .asset-word-count {
  order: 4;
}

.AssetView .asset-extension {
  order: 4;
}

.AssetView .asset-size {
  order: 5;
}

.AssetView .asset-dimensions {
  order: 6;
}

.AssetView .asset-description {
  order: 7;
}

.AssetView .asset-licence {
  order: 8;
}

.AssetView .asset-terms-of-use {
  order: 9;
  padding-bottom: 1rem;
}

.AssetView .asset-creator{
  order: 10;
}

.AssetView .asset-expiry-date {
  order: 10;
}

.AssetView .asset-release-date {
  order: 11;
}

.AssetView .asset-credit {
  order: 12;
}

.AssetView .asset-created-at {
    order: 12;
}

.AssetView .asset-usage {
  order: 13;
}

.AssetView .asset-reference {
  order: 14;
}

.AssetView .asset-account {
  order: 15;
}

.AssetView .asset-location {
  order: 15;
}

@media screen and (min-width: 36em){
  .asset-page-wrapper{
    padding: 6.8rem 10rem;
  }
  
  .asset-proxy-section{  
    margin-right: 5rem
  }
  
  .asset-page-wrapper.post .asset-proxy-section{
    margin-top: 0;
  }
  
  .portal .grid-view .asset {       
    padding-bottom: 0.5rem;
  }
}
/* adds some separation to the related assets section in Portal */
.related-assets-section {
  border-top:1px dotted #ccc;
  margin-bottom:5em;
}.bk-wall-login {
  padding: 0;
}.desktop {display:none;}

@media screen and (min-width: 36em){
  .desktop {display:block;}
  .mobile {display:none;}
  .albums-horizontal-grid .album-wrapper {
	max-width:100%;
    overflow-wrap:normal;
    flex-wrap:wrap;
  }
}

/* Albums widget */
.albums-grid .album {
  aspect-ratio:3 / 2;
} /* sets aspect ratio of album covers consistently when height is calculated */
.album-cover,.album-with-no-cover {
  border:5px solid #ccc;
}
.album-cover:hover, .album-with-no-cover:hover {
  border:5px solid #f9d147;
}

/* new album select state */
a.album-selected {
  border: none;
  box-shadow: none;
}
a.album-selected img, a.album-selected div.album-with-no-cover {
  border:5px solid #f9d147;
  box-shadow: 0 15px 25px 1px #ccc;
}
a.album-selected span.album-title {
  color:#000;
  font-weight:bold;
}
/* end album select state */

@media screen and (min-width: 62em) {
  .albums-horizontal-grid .album-wrapper {
	max-width:100%;
    overflow-wrap:normal;
    flex-wrap:wrap;
  }
}.radio-label {line-height:2;margin-top:1rem;}/* increase space between share method choices */
.share-page-title legend {margin-bottom:1rem;}